<template>
  <div class="top">
    <van-swipe class="top-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="banner in banners" :key="banner.targetId">
        <div class="warp">
          <van-image
            width="100%"
            height="134px"
            fit="contain"
            :src="banner.pic"
          /><div class="type-title" :style="{ backgroundColor: banner.titleColor }">{{ banner.typeTitle }}</div></div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts">
import { defineComponent,computed,inject } from 'vue'
import { alldatakey } from '../key'

// 轮播横幅
const useBanners = (alldata: any) =>{
  const block = computed<any>(()=>{
    if(!alldata.data) return null
    return alldata.data.blocks.find((block: any) => block.blockCode === 'HOMEPAGE_BANNER')
  })
   const banners =  computed(()=>{
    if(!block.value) return []
    return block.value?.extInfo.banners
  })
  return {
    banners
  }
}

export default defineComponent({
  name: 'banner',
  setup(){
    const alldata = inject(alldatakey)
    return {
      ...useBanners(alldata)
    }
  },
})
</script>

<style lang="scss" scoped>
.top {
  padding: 0 15px;
  .top-swipe {
    .warp {
      position: relative;
      height: 134px;
      // border-radius: 15px;
      // overflow: hidden;
      .type-title {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 5px 10px;
        border-radius: 15px 0 15px 0;
        color: #fff;
        font-size: 12px;
      }
      ::v-deep(img){
        border-radius: 15px;
      }
    }
    
  }
}
</style>